<md-dialog aria-label="" flex="85">
    <form name="PatientDiagnosisForm" ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Diagnosis</h2>
                <span flex></span>
                <md-button aria-label="Close" class="md-icon-button" ng-click="vm.CloseDialog(PatientDiagnosisForm.$dirty)">
                    <md-tooltip>Close</md-tooltip>
                    <md-icon md-font-library="material-icons">&#xE5CD;</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content layout="column" layout-align="space-around stretch" >
            <!--<div class="md-dialog-content" layout="column">-->
                <!--<md-subheader class="md-no-sticky">Search Diagnosis</md-subheader>-->
                <div layout="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                    <div layout="row" layout-padding flex>
                        <md-input-container class="md-icon-float md-block md-accent inputValidation" flex>
                            <label>Search </label>
                            <input class="StyledTextInput" required ng-model="vm.SearchText" name="SeachText" minlength="3" maxlength="100">
                            <div ng-messages="PatientDiagnosisForm.SearchText.$error" role="alert">
                                <div ng-message="required">Please enter atleast 3 characters to search</div>
                                <div ng-message="minlength">Please enter atleast 3 characters to search</div>
                                <div ng-message="maxlength">Search Text should be less than 100 characters</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div layout="row" layout-padding>
                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Search" type="submit" style="margin:0px 10px 10px 0px" ng-click="vm.SearchDiagnosis()" ng-disabled="PatientDiagnosisForm.$invalid">
                            <md-tooltip>Search</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE8B6;</md-icon>
                        </md-button>
                    </div>
                </div>

                <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                    <div flex layout-padding layout="column" style="overflow:auto;">
                        <md-table-container>
                            <table md-table md-row-select multiple md-auto-select ng-model="vm.SelectedCodes" md-progress="promise">
                                <thead md-head>
                                    <tr md-row>
                                        <th md-column><span>ICD10 Diagnosis Code</span></th>
                                        <th md-column><span>Long Description</span></th>
                                        <!--<th md-column>Short Description</th>-->
                                    </tr>
                                </thead>
                                <tbody md-body>
                                    <tr md-row md-select="code.ChipItem" md-select-id="{{code.DiagnosisID}}" md-auto-select ng-repeat="code in vm.DiagnosisCodes">
                                        <td md-cell>{{code.ICD10Code}}</td>
                                        <td md-cell>{{code.LongDescription}}</td>
                                        <!--<td md-cell>{{code.ShortDescription}}</td>-->
                                    </tr>
                                </tbody>
                            </table>
                        </md-table-container>

                        <md-table-pagination md-limit="10" md-limit-options="[10]" md-page="1" md-total="{{vm.TotalDiagnosis}}" md-on-paginate="vm.onPaginate" md-page-select></md-table-pagination>
                    </div>
                </div>

                <md-subheader class="md-no-sticky">Selected Diagnosis</md-subheader>

                <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                    <div flex layout-padding layout="column" style="height:200px; overflow:auto;">
                        <md-list>
                            <md-list-item ng-repeat="diagnosis in vm.SelectedCodes" class="noright">
                                <p class="StyledTextInput">{{diagnosis}}</p>
                                <md-button aria-label="Delete" class="md-icon-button md-secondary" ng-click="vm.DeleteItem(diagnosis)">
                                    <md-tooltip>Delete Diagnosis</md-tooltip>
                                    <md-icon md-font-library="material-icons">&#xE872;</md-icon>
                                </md-button>
                                <md-divider md-primary ng-if="!$last"></md-divider>
                            </md-list-item>
                        </md-list>
                    </div>
                </div>
            <!--</div>-->
            
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button type="reset" class="md-raised md-hue-2 md-primary" ng-click="vm.CloseDialog(PatientDiagnosisForm.$dirty)">Cancel</md-button>
            <md-button type="submit" class="md-raised md-hue-3 md-accent" ng-click="" >Save</md-button>
        </md-dialog-actions>
    </form>
</md-dialog>